<template>
  <div style="margin-top: 20px">
    <div style="margin: 20px 0 10px 40px; font-weight: bold">基础档案</div>
    <div>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row type="flex" justify="start">
          <a-col :span="4">
            <a-form-model-item label="单号">
              <a-input v-model="form.billno" placeholder="手工输入" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="样衣号" prop="region">
              <a-input v-model="form.samplecode" placeholder="手工输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="品名" prop="region">
              <a-input v-model="form.samplename" placeholder="跳转到品名挑战选择" @click="ProductName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="品牌" prop="region">
              <a-select show-search placeholder="请选择品牌" v-model="brandw" allow-clear @change="changeOper">
                <a-select-option :value="item.name" v-for="(item, index) in operList" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="品类" prop="region">
              <a-select style="width: 180px" show-search placeholder="请选择品类" v-model="operistd" @change="changeBrand" allow-clear>
                <a-select-option :value="item.name" v-for="(item, index) in brandList" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="上货季" prop="region">
              <a-select style="width: 180px" show-search v-model="scseason" placeholder="请选择上货季" allow-clear @change="changeScseason">
                <a-select-option :value="item.name" v-for="(item, index) in partList" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="start">
          <a-col :span="4">
            <a-form-model-item label="泼段" prop="region">
              <a-select v-model="form.split" placeholder="下拉选择">
                <a-select-option :value="item" v-for="(item, index) in splitList" :key="index">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="设计师">
              <a-input v-model="form.designerName" disabled placeholder="请输入设计师" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="版师" prop="region">
              <a-input v-model="form.sampleDesignName" disabled placeholder="请输入版师"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="款号">
              <a-input v-model="form.styleNo" disabled placeholder="请输入款号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="工艺师">
              <a-input v-model="form.craftsman" disabled placeholder="请输入工艺师" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="版次" prop="region">
              <a-input v-model="form.edition" disabled placeholder="请输入版次" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="start">
          <a-col :span="4">
            <a-form-model-item label="大版次" prop="region">
              <a-input v-model="form.bigEdition" disabled placeholder="请输入大版次" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="流程节点">
              <a-input v-model="form.flagname" disabled placeholder="请输入流程节点" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="创建时间">
              <a-date-picker style="width: 100%" allowClear v-model="form.inputdate" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="创建人" prop="region">
              <a-input v-model="form.createtor" disabled placeholder="请输入创建人" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div style="margin-left: 20px">辅料信息</div>
    <!-- 主料 -->
    <mainw></mainw>
    <!-- 辅料 -->
    <dmaterial></dmaterial>
  </div>
</template>

  <script>
import { getDictChildList } from '@api/rd/index'
import { detail, getBandList } from '@api/spection/index'
import mainw from './components/skipping/main.vue'
import dmaterial from './components/skipping/material.vue'
export default {
  name: 'material',
  components: {
    dmaterial,
    mainw
  },
  data() {
    return {
      userName: 1,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      title: '',
      form: {
        // name: '',
        // region: undefined,
        // date1: undefined,
        // delivery: false,
        // type: [],
        // resource: '',
        // desc: ''
        split: ''
      },
      brandw: undefined,
      operistd: undefined,
      scseason: undefined,
      operList: [],
      brandList: [],
      partList: [],
      splitList: [],
      value: '',
      pagination: false,
      loading: false,
      rules: {
        // name: [
        //   { required: true, message: 'Please input Activity name', trigger: 'blur' },
        //   { min: 4, max: 5, message: 'Length should be 4 to 5', trigger: 'blur' }
        // ],
        // region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        // date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
        // type: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: 'Please select at least one activity type',
        //     trigger: 'change'
        //   }
        // ],
        // resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
        // desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  created() {
    this.detail()
    this.getBandListWay()
    this.getDictChildList()
    this.getDictChildLists()
    this.getDictChildLiss()
  },
  methods: {
    btn() {
      const title = {}
      console.log(JSON.parse(JSON.stringify(title)))
      const parse = JSON.parse(JSON.stringify(title))
      console.log(parse)
      if (parse.title == '辅料编号') {
        console.log(title.name)
        this.title = title.name
      }
    },
    async detail() {
      const parder = this.$route.query.billNo
      try {
        const res = await detail(parder)
        window.console.log('res', res)
        if (res.code == 200) {
          this.form = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 上货季
    async getDictChildList() {
      const params = {
        name: 'SEASON'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.partList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取上货季列表失败！')
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 品牌
    async getDictChildLists() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        window.console.log('品牌', res)
        if (res.code == 200) {
          this.operList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 品类
    async getDictChildLiss() {
      const params = {
        name: 'CATEGORY'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品类列表失败！')
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 品类
    async getDictChildLiss() {
      const params = {
        name: 'CATEGORY'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品类列表失败！')
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    changeOper(value) {
      window.console.log('value', value)
      this.brandw = value
    },
    changeBrand(value) {
      this.operistd = value
    },
    changeScseason(value) {
      this.scseason = value
    },
    // 页码以及条数
    onChange(current, pageSize) {
      console.log(current, pageSize)
      this.current = current
    },
    ProductName() {
      this.$router.push('/spection/Designlist/ProductName/index')
    },

    customHeaderCell(column, index) {
      return {
        on: {
          click: event => {
            console.log(column, index, event.target)
            console.log(event)
          }
        }
      }
    },
    async getBandListWay (brank) {
      let res = brank === undefined ? await getBandList('') : await getBandList(brank)
      this.splitList = res.data
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-row {
  height: 10px;
}
</style>
  